<script setup lang="ts">
import { useI18n } from '@/hooks/web/useI18n'
import { reactive, watch, ref } from 'vue'
import { clientSelect, empSelect } from '@/api/common'

import {
  FormInstance,
  FormRules,
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
  ElCol,
  ElSelect,
  ElOption
} from 'element-plus'

const { t } = useI18n()

const props = defineProps({
  currentRow: {
    type: Object as any,
    default: () => null
  }
})

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    form.id = currentRow.id
    form.type = currentRow.type
    form.user_id = currentRow.user_id
    form.rate = currentRow.rate
  }
)

// 表单对应的字段（绑定到输入框以及选择框俄字段）
const form: any = reactive({
  id: '',
  type: '',
  user_id: '',
  rate: ''
})

//表单验证
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<form>>({
  type: [{ required: true, message: '用户类型必填', trigger: 'blur' }],
  store_id: [{ required: true, message: '货品位置必填', trigger: 'blur' }],
  relatedCustomers: [{ required: true, message: '客户号必填', trigger: 'blur' }],
  recipient: [{ required: true, message: '收货人必填', trigger: 'blur' }]
})

const typeArr = reactive([
  {
    label: '客户',
    value: 'client'
  },
  {
    label: '用户',
    value: 'emp'
  }
])

//关联客户
const clientArr: any = reactive([])
const getClientSelect = async () => {
  let res: any = await clientSelect({})
  res.data.list.forEach((item) => {
    clientArr.push({
      label: item.fahuo,
      value: item.code
    })
  })
}
getClientSelect()

const empArr: any = reactive([])
const getEmpSelect = async () => {
  let res: any = await empSelect({})
  res.data.list.forEach((item) => {
    empArr.push({
      label: item.name,
      value: item.user_id
    })
  })
}
getEmpSelect()

const typeChange = () => {
  form.user_id = ''
}

defineExpose({
  getFormData: () => {
    return form
  },
  getRlus: () => {
    return ruleFormRef
  }
})
</script>

<template>
  <ElForm :model="form" ref="ruleFormRef" label-width="auto" :rules="rules">
    <ElRow>
      <ElCol :span="6">
        <ElFormItem label-width="100px" prop="type" :label="t('rebateUsers.customerType')">
          <ElSelect
            clearable
            v-model="form.type"
            :placeholder="t('common.selectText')"
            @change="typeChange"
            filterable
          >
            <ElOption
              v-for="item in typeArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="6" v-if="form.type == 'client'">
        <ElFormItem label-width="100px" :label="t('warehousingEntryAddWrite.relatedCustomers')">
          <ElSelect v-model="form.user_id" :placeholder="t('common.selectText')">
            <ElOption
              v-for="item in clientArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="6" v-if="form.type == 'emp'">
        <ElFormItem label-width="100px" :label="t('rebateUsers.associatedUsers')">
          <ElSelect v-model="form.user_id" :placeholder="t('common.selectText')">
            <ElOption
              v-for="item in empArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="150px" :label="t('rebateUsers.rebateRatio')">
          <ElInput v-model="form.rate" />
        </ElFormItem>
      </ElCol>
    </ElRow>
  </ElForm>
</template>
<style scoped lang="less">
.listForItem {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .el-col:nth-of-type(2) {
    font-size: var(--el-form-label-font-size);
    padding: 0 15px;
  }
  .el-col:nth-of-type(1) {
    padding-right: 15px;
  }
  .el-col:nth-of-type(6) {
    padding-left: 15px;
  }
  .el-divider--horizontal {
    margin: 0;
  }
  .el-form-item--default {
    margin-bottom: 0;
  }
}
</style>
